<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: YuanYu
 * @LastEditTime: 2021-10-18 11:01:32
-->
<template>
  <!-- 这里使用ref 作用类似于id -->
  <!-- 2.定义容器 -->
  <div id="right1" style="height: 150px"></div>
</template>

<script>
// 在g2plot中 引入Column组件
import { CirclePacking } from "@antv/g2plot";
// 使用vue3.0的语法
// 1.引入g2plot 已经在package.json中进行引用

export default {
  data() {
    return {};
  },
  methods: {
    initChart() {
      const data = {
        name: "root",
        children: [
          { name: "全自动生化分析仪", value: 33 },
          { name: "X光", value: 27 },
          { name: "B超", value: 25 },
          { name: "核磁", value: 15 },
          { name: "DSA", value: 22 },
          { name: "数字胃肠DR", value: 21 },
          { name: "内窥镜", value: 17 },
        ],
      };

      const plot = new CirclePacking("right1", {
        autoFit: true,
        padding: 0,
        data,
        sizeField: "r",
        color: "rgb(252, 253, 191)-rgb(231, 82, 99)-rgb(183, 55, 121)",
        // 自定义 label 样式
        label: {
          formatter: ({ name }) => {
            return name !== "root" ? name : "";
          },
          // 偏移
          offsetY: 8,
          style: {
            fontSize: 10,
            textAlign: "center",
            fill: "rgba(0,0,0,0.65)",
          },
        },
        legend: false,
      });
      plot.render();
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>


<style scoped>
</style>